<script setup>
import { onMounted, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
const repository = ref("");


const shelfOrder=ref(0);
const options = ref([
  {
    value: "A",
    label: "A仓库",
  },
  {
    value: "B",
    label: "B仓库",
  },
  {
    value: "C",
    label: "C仓库",
  },
  {
    value: "D",
    label: "D仓库",
  },
]);
const dialogVisible = ref(false);
const loading = ref(false);
const warehouseStatus = ref([]);
const shelf = ref([]);
const setStatusClass = (status) => {
  if (status == 1) {
    return "green";
  } else if (status == 3) {
    return "red";
  } else if (status == 2) {
    return "yellow";
  }
};
const handleContent = (content, status) => {
  if (status == 2) {
    return "小车运送中";
  } else if (status == 1) {
    return "暂无货物";
  } else {
    return content;
  }
};
const handleContent2 = (content, status,company) => {
  if (status == 2) {
    return "小车运送中";
  } else if (status == 1) {
    return "暂无货物";
  } else {
    if(company===companyId.value){
    return content;
    }else{
      return "其他公司货物";
    }
  }


};
const dialogTop = ref("20px");
const dialogLeft = ref("10px");
const judgeFloorColor = (status) => {
  if (status == 1) {
    return "button-text-empty";
  } else if (status == 2) {
    return "button-text-transport";
  } else if (status == 3) {
    return "button-text-full";
  }
};

const getButtonColor = (statusArray) => {
  if (statusArray.status == 1) {
    return "green";
  } else if (statusArray.status == 3) {
    return "red";
  } else if (statusArray.status == 2) {
    return "orange";
  }
};
const getButtonColor2 = (statusArray) => {
  if (statusArray.status == 1) {
    return "rgb(10, 233, 48, 0.5)";
  } else if (statusArray.status == 3) {
    return "rgb(241, 9, 9, 0.5)";
  } else if (statusArray.status == 2) {
    return "rgb(239, 209, 15, 0.5)";
  }
};
const shelfNumber=ref("");
const button1 = ref(null); //为什么要放到onMounted外面
const button2 = ref(null);
const button3 = ref(null);
const button4 = ref(null);
const button5 = ref(null);
const button6 = ref(null);
import {getShelfInformation} from "@/api/getShelfInformation";
const handleClick = async (refValue) => {

  setShelfNumber(refValue);
  const arr = [
    {button:"button1",order:1},
    {button:"button2",order:2},
    {button:"button3",order:3},
    {button:"button4",order:4},
    {button:"button5",order:5},
    {button:"button6",order:6},
  ];
  
  arr.forEach((item) => {
    if (item.button === refValue) {
      shelfOrder.value=item.order;
    }
    dialogVisible.value = true;
  });

  const res=await getShelfInformation({
    repository:repository.value,
    shelfOrder:shelfOrder.value
  });

 
 


  shelf.value=res.data.data;
  // shelfTemp.sort((a, b) => a.floorOrder-b.floorOrder);

};
import { useUserStore } from "@/stores/user";
import { getCompanyId } from "@/api/getCompanyId";
const companyId=ref();
const userStore=useUserStore();

onMounted(async ()=>{
    const res=await getCompanyId({
      userId:userStore.userId
    });
  companyId.value=res.data.data;
    
});

import { getRepositoryStatus } from "@/api/getRepositoryStatus";
const loading2=ref(false);

const handleCheck = async () => {
  loading2.value=true;
  const res = await getRepositoryStatus({
    repository: repository.value,
  });
  loading2.value=false;
  warehouseStatus.value = res.data.data;
//  console.log(warehouseStatus.value);
  setColor();
};
const setColor = () => {
  warehouseStatus.value.forEach((item) => {
    const color = getButtonColor2(item);
  //  console.log(color);
    if (item.shelfOrder == 1) {
      button1.value.style.backgroundColor=color;
    
    }
    if (item.shelfOrder == 2) {
      button2.value.style.backgroundColor=color;
     
    }
    if (item.shelfOrder == 3) {
      button3.value.style.backgroundColor=color;
   
    }
    if (item.shelfOrder == 4) {
      button4.value.style.backgroundColor=color;
      
    }
    if (item.shelfOrder == 5) {
      button5.value.style.backgroundColor=color;
   
    }
    if (item.shelfOrder == 6) {
      button6.value.style.backgroundColor=color;
     
    }
  });
};
const setShelfNumber=(button)=>{
  if(button==="button1"){
    shelfNumber.value="货架1";
  }else if(button==="button2"){
    shelfNumber.value="货架2";
  }else if(button==="button3"){
    shelfNumber.value="货架3";
  }else if(button==="button4"){
    shelfNumber.value="货架4";
  }else if(button==="button5"){
    shelfNumber.value="货架5";
  }else if(button==="button6"){
    shelfNumber.value="货架6";
  }

}


let websocket;

function initWebSocket() {
  
    websocket = new WebSocket('ws://localhost:9090/inventory-socket');


    websocket.onmessage = function(event) {
        try {
            const data = JSON.parse(event.data);
            console.log(event.data);
            let shelfId=0;

            if(repository.value==="A"){
              shelfId=shelfOrder.value;
            }else if(repository.value==="B"){
              shelfId=shelfOrder.value+6;
            }else if(repository.value==="C"){
              shelfId=shelfOrder.value+12;
            }else if (repository.value==="D"){
              shelfId=shelfOrder.value+18;
            }
            console.log("仓库是"+repository.value);
      console.log("shelfId是"+shelfId);
            if(data.shelfId===shelfId){
              shelf.value = data.floorsInfo.map(item => ({
                status:item.status,
                name:handleContent2(item.name,item.status,item.companyId),
            }));
            }

            if(repository.value===data.repositoryName){
              warehouseStatus.value=data.shelvesInfo.map(item=>({
                shelfOrder:item.shelfOrder,
                status:item.status,
                

              }))
              setColor();
            }
           
            // setColor();
        } catch (error) {
            console.error('Error parsing JSON:', error);
        }
    };

    websocket.onerror = function(event) {
        console.error('WebSocket error observed:', event);
    };

    websocket.onclose = function(event) {
        console.log('WebSocket is closed now.');
    };

    websocket.onopen = function(event) {
        console.log('WebSocket connection successfully opened');
    };
}

onMounted(() => {
    initWebSocket();
});
</script>

<template>
  <div class="header">
    <el-select
      v-model="repository"
      placeholder="请选择仓库"
      size="large"
      style="width: 240px"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-button
      class="el-button"
      round
      color="#3c9d19"
      type="primary"
      :icon="Search"
      @click="handleCheck"
      ><span style="margin-top: 3px">查询</span></el-button
    >
  </div>

  <div v-if="loading2" class="loading-overlay">
    <!-- 这里可以放置加载动画或加载提示 -->
    <div class="loader"></div>
    <p style="color:green">Loading...</p>
  </div>


  <div class="father">
    <div class="storage">
      <!-- <button
        v-for="index in 6"
        :key="'button' + index"
        class="button-dashed"
        :ref="`button${index}`"
      >
        Button {{ index }}
      </button> -->
      <button
        class="button-dashed"
        ref="button1"
        @click="handleClick('button1')"
      >
        货架1
      </button>
      <button
        class="button-dashed"
        ref="button2"
        @click="handleClick('button2')"
      >
        货架2
      </button>
      <button
        class="button-dashed"
        ref="button3"
        @click="handleClick('button3')"
      >
        货架3
      </button>
      <button
        class="button-dashed"
        ref="button4"
        @click="handleClick('button4')"
      >
        货架4
      </button>
      <button
        class="button-dashed"
        ref="button5"
        @click="handleClick('button5')"
      >
        货架5
      </button>
      <button
        class="button-dashed"
        ref="button6"
        @click="handleClick('button6')"
      >
        货架6
      </button>
    </div>
  </div>

  <el-dialog
    v-model="dialogVisible"
    :top="dialogTop"
    :left="dialogLeft"
    :title="shelfNumber"
    width="400"
  >
  
      <el-table  :data="shelf" style="width: 100%">
        <el-table-column width="120">
          <template v-slot="scope">
            <button :class="judgeFloorColor(scope.row.status)"></button>
          </template>
        </el-table-column>
        <el-table-column width="120">
          <template v-slot="scope">
            <div>
              {{ handleContent(scope.row.name, scope.row.status) }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    
  </el-dialog>
</template>

<style scoped>
 /* 先后决定优先级,不推荐使用，因为无法覆盖
.orange {
  background-color: rgb(239, 209, 15, 0.5);
}
.green {
  background-color: rgb(10, 233, 48, 0.5);
}
.red {
  background-color: rgb(241, 9, 9, 0.5);
} */
.loading-overlay {
  position: absolute;
  top: 200px;
  left: 300px;
  width: 50%;
  height: 50%;
  background-color: rgba(243, 246, 241, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.button-text-empty {
  background-color: rgb(10, 233, 48, 0.5);
  border: none;
  height: 30px;
  border-radius: 10%;
  width: 60px;
  align-self: center;
}
.button-text-full {
  background-color: #e45151;
  border: none;
  height: 30px;
  border-radius: 10%;
  width: 60px;
  align-self: center;
}
.button-text-transport {
  background-color: rgb(228, 180, 6);
  border: none;
  height: 30px;
  border-radius: 10%;
  width: 60px;
  align-self: center;
}

.flex-container {
  display: flex; /* 内部显示模式 */
  justify-content: space-around; /* 可选：flex 布局中的主轴对齐方式 */
  align-items: center; /* 可选：flex 布局中的交叉轴对齐方式 */
  flex-direction: column;
}

.flex-item {
  margin: 5px; /* 可选：为了可视化效果添加的外边距 */
}
.shelves-green {
  background-color: rgb(8, 196, 8);
}
.shelves-red {
  background-color: rgb(241, 51, 3);
}
.shelves-yellow {
  background-color: rgb(169, 190, 11);
}
.header {
  width: 400px;
  display: flex;
  justify-content: space-between;
}
.father {
  position: relative;
}
.storage {
  position: absolute;
  left: 150px;
  top: 40px;
  height: 450px;
  width: 800px;
  border: 1px solid rgb(3, 3, 35);
  margin: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: space-evenly;
}

.button-dashed {
  border: none;
  height: 160px;
  width: 220px;
  border-radius: 10%;
  border: 1px dashed rgb(193, 193, 246);
  align-self: center;
}
.button-dashed:hover {
  cursor: pointer;
  border: 1px dashed rgb(107, 107, 239);
}
</style>
